<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <%@ include file="/include/service-base-header.jsp" %>
    <title>投注单列表</title>
</head>
<body>
<div class="wrapper">
    <jsp:include page="/include/left_menu.jsp">
        <jsp:param name="index" value="2"/>
    </jsp:include>
    <div class="main-panel">
        <nav class="navbar navbar-expand-lg navigation_shadow_none">
            <div class="container-fluid">
                <div class="navbar-wrapper b-navbar-wapper">
                    <a class="b-navbar-title-active" href="#">投注单列表</a>
                </div>

                <div class="nav-collapse justify-content-end">
                    <div class="toolbar_left">
                        <div class="form-inline" style="height: 1rem">
                            <input type="text" class="datetimepicker" id="sta_time" placeholder="选择时间"
                                   style="border:1px;border-bottom:#a8a8a8 1px solid;background: transparent;">
                            <div style="margin-left: 1rem;margin-bottom: 1.3rem">
                                <select id="select_market"
                                        class="selectpicker" data-style="select-with-transition"
                                        title="玩法标签" data-size="7" tabindex="-98">
                                    <option class="bs-title-option" value="">全部市场</option>
                                    <option value="">全部</option>
                                    <option value="100">胜平负</option>
                                    <option value="130">入球数单双</option>
                                    <option value="140">正确比分</option>
                                    <option value="350">下一个进球</option>
                                    <option value="410">准确进球总数</option>
                                </select>
                            </div>
                            <div style="margin-left: 1rem;margin-bottom: 1.3rem">
                                <select id="select_status"
                                        class="selectpicker" data-style="select-with-transition"
                                        title="状态" data-size="7" tabindex="-98">
                                    <option class="bs-title-option" value="">全部状态</option>
                                    <option value="">全部</option>
                                    <option value="0">等待确认</option>
                                    <option value="1">等待结算</option>
                                    <option value="2">已结算</option>
                                    <option value="3">已被取消</option>
                                    <option value="4">无效</option>
                                    <option value="5">被拒绝</option>
                                </select>
                            </div>
                            <div class="form-group" style="padding-bottom: 1.1rem;margin-left: 2rem">
                                <input id="keyword" type="text" class="form-control mt-1" placeholder="手机号，赛事"
                                       style="border:0px;border-bottom:#a8a8a8 1px solid;background: transparent"/>
                                <button type="submit" class="btn btn-white btn-round btn-just-icon">
                                    <i class="material-icons" onclick="findOrderList()">search</i>
                                    <div class="ripple-container"></div>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </nav>

        <div class="col-md-12">
            <div class="card card-plain">
                <div class="card-header card-header-primary">
                    <div class="card-title">投注单列表</div>
                    <p class="card-category">查询投注单</p>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table" id="table">
                            <thead class=" text-primary">
                            <tr>
                                <th style="color: #9c27b0;font-size: 1rem">
                                    ID
                                </th>
                                <th style="color: #9c27b0;font-size: 1rem">
                                    投注时间
                                </th>
                                <th style="color: #9c27b0;font-size: 1rem">
                                    投注账号
                                </th>
                                <th style="color: #9c27b0;font-size: 1rem">
                                    投注比赛
                                </th>
                                <th style="color: #9c27b0;font-size: 1rem">
                                    投注市场
                                </th>
                                <th style="color: #9c27b0;font-size: 1rem">
                                    投注金额
                                </th>
                                <th style="color: #9c27b0;font-size: 1rem">
                                    状态
                                </th>
                            </tr>
                            </thead>
                            <tbody id="tb1">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <nav aria-label="page">
            <ul class="pagination justify-content-center" id="p1">
            </ul>
        </nav>
    </div>

</div>
</body>


<script>

    var data_source;
    var page_count = 15;

    function init() {
        $('.datetimepicker').datetimepicker({
            icons: {
                time: "fa fa-clock-o",
                date: "fa fa-calendar",
                up: "fa fa-chevron-up",
                down: "fa fa-chevron-down",
                previous: 'fa fa-chevron-left',
                next: 'fa fa-chevron-right',
                today: 'fa fa-screenshot',
                clear: 'fa fa-trash',
                close: 'fa fa-remove'
            },
            format: 'YYYY-MM-DD'
        });
    }

    init();

    function findOrderList() {
        var data = {};
        var ruleType = $("#select_market").val();
        var status = $("#select_status").val();
        var time = $("#sta_time").val();
        var keyword = $("#keyword").val();
        if (time.length == 10) {
            data.date = time;
        }
        data.ruleType = ruleType;
        data.status = status;
        data.keyword = keyword;
        $.ajax({
            url: baseUrl.base + baseUrl.order + "/getOrderManager",
            type: 'get',
            data: data,
            success: function (data) {
                if (data.code == "0") {
                    var res = data.results;

                    data_source = res;

                    cutPagination(1);

                    // 配置分页
                    $("#p1").pagination({
                        totalData: res.length,
                        showData: page_count,
                        callback: function (idx) {
                            cutPagination(idx);
                        }
                    });
                } else {
                }
            }
        });
    };
    findOrderList();

    function cashDeatils(column) {
    }

    //获取用户详情
    function detailOrderInfo(column) {
        column.style.color = "#f44336";
        var orderId = column.getAttribute("orderId");
        $.ajax({
            url: baseUrl.base + baseUrl.order + "",
            type: 'get',
            data: {"orderId": orderId},
            success: function (data) {
                if (data.code == "0") {
                    var userInfo = data.results;

                }
            }
        })
    }

    /**
     * 分页
     * @param page 从1开始
     */
    function cutPagination(page) {

        var start = (page - 1) * page_count;
        var end = start + page_count;

        if (end > data_source.length) {
            end = data_source.length;
        }

        $("#tb1").html("");
        for (var i = start; i < end; i++) {
            var order = data_source[i];

            var tr = document.createElement("tr");
            var td = document.createElement("td");
            var tdContent = document.createTextNode(order.orderId);
            td.appendChild(tdContent);
            tr.appendChild(td);
            td = document.createElement("td");
            var time = document.createTextNode(timestampToTime(order.createTime));
            td.appendChild(time);
            tr.appendChild(td);
            td = document.createElement("td");
            tdContent = document.createTextNode(order.userPhone);
            td.appendChild(tdContent);
            tr.appendChild(td);
            td = document.createElement("td");
            tdContent = document.createTextNode(order.competitionName + ' · ' + order.homeTeam + ' VS ' + order.awayTeam);
            td.appendChild(tdContent);
            tr.appendChild(td);

            td = document.createElement("td");
            var span = document.createElement("span");
            tdContent = document.createTextNode(order.ruleTypeName + '·' + order.selectionName + '·' + order.orderOdds);
            span.appendChild(tdContent);

            var spandeta = document.createElement("span");
            spandeta.appendChild(tdContent);
            spandeta.onclick = function () {
                cashDeatils(this)
            };
            spandeta.style.marginLeft = '6px';
            td.appendChild(span);
            td.appendChild(spandeta);
            tr.appendChild(td);


            td = document.createElement("td");
            span = document.createElement("span");
            tdContent = document.createTextNode(order.orderMoney + 'KSH');
            span.appendChild(tdContent);
            var spancash = document.createElement("span");
            spancash.onclick = function () {
                cashDeatils(this)
            };
            spancash.appendChild(tdContent);
            spancash.style.marginLeft = '6px';
            td.appendChild(span);
            td.appendChild(spancash);
            tr.appendChild(td);

            td = document.createElement("td");
            if (order.orderState == 0) {
                tdContent = document.createTextNode("等待确认");
            } else if (order.orderState == 1) {
                tdContent = document.createTextNode("等待结算");
            } else if (order.orderState == 2) {
                var str = "已结算";
                var isWin = order.isWin;
                if (isWin == 1){
                    str += " · 赢";
                }else {
                    str += " · 输";
                }
                tdContent = document.createTextNode(str);
            } else if (order.orderState == 3) {
                tdContent = document.createTextNode("已被取消");
            } else if (order.orderState == 4) {
                tdContent = document.createTextNode("无效");
            } else if (order.orderState == 5) {
                tdContent = document.createTextNode("被拒绝");
            }
            td.appendChild(tdContent);
            tr.appendChild(td);

//                        td = document.createElement("td");
//                        span = document.createElement("span");
//                        var orderId = res[i].orderId;
//                        span.setAttribute("orderId", orderId);
//                        tdContent = document.createTextNode("查看详情");
//                        span.appendChild(tdContent);
//                        span.setAttribute("data-toggle", "modal");
//                        span.setAttribute("data-target", "#loginModal");
//                        span.onclick = function () {
//                            detailOrderInfo(this);
//                        };
            td.appendChild(span);
            tr.appendChild(td);
            document.getElementById("tb1").append(tr);
            document.getElementById("tb1").innerHTML;
        }

    }
</script>
</html>